<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6">
        <a @click="openNodeFlow('LIVING_ALLOWANCES','城市低保')">
          <div class="collect_list">
            <img src="@/assets/collect_images/低保.png">
            <div>
              城市低保
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="openNodeFlow('LIVING_ALLOWANCES_AGRICULTURAL','农村低保')">
          <div class="collect_list">
            <img src="@/assets/collect_images/低保.png">
            <div>
              农村低保
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="openNodeFlow('LIVING_ALLOWANCES_CHANGE','低保变更')">
          <div class="collect_list">
            <img src="@/assets/collect_images/低保.png">
            <div>
              低保变更
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="openNodeFlow('LIVING_ALLOWANCES_CHANGE_REPORT','低保变更上报')">
          <div class="collect_list">
            <img src="@/assets/collect_images/低保.png">
            <div>
              低保变更上报
            </div>
          </div>
        </a>
      </el-col>
    </el-row>
    <el-row>  
      <el-col :span="6">
        <a @click="openNodeFlow('EDUCATIONAL_SUPPORT_RURAL','低保五保教育资助')">
          <div class="collect_list">
            <img src="@/assets/collect_images/低保五保教育资助.png">
            <div>
              低保五保教育资助
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="openNodeFlow('EDUCATIONAL_SUPPORT_FERTILITY','计生教育补助')">
          <div class="collect_list">
            <img src="@/assets/collect_images/计生教育补助.png">
            <div>
              计生教育补助
            </div>
          </div>
        </a>
      </el-col>
      <el-col :span="6">
        <a @click="openNodeFlow('EDUCATIONAL_SUPPORT_LOTTERY','福彩教育资助')">
          <div class="collect_list">
            <img src="@/assets/collect_images/福彩教育资助.png">
            <div>
              福彩教育资助
            </div>
          </div>
        </a>
      </el-col>
    </el-row>
    <el-dialog :title="dialogTitle" width="70%" :visible.sync="nodeFlowVisible">
      <el-dialog width="50%"
        title="选择接收人"
        :visible.sync="taskAuthorityVisible"
        append-to-body>
        <task-authority :group="editGroup" ref="taskAuthority"></task-authority>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary"  @click="editTaskGroup">确定</el-button>
        </div>
      </el-dialog>
      <node-flow @transGroup="openTaskAuthorityDialog" :tasks="tasks"></node-flow>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitModify">确定</el-button>
      </div>
    </el-dialog>
 </div>
</template>
<script>
import NodeFlow from "./components/NodeFlow";
import TaskAuthority from "./components/TaskAuthority";
import { getWorkflowTask, modifyTask } from "@/api/workflow";

export default {
  data() {
    return {
      workflow: null,
      dialogTitle: null,
      nodeFlowVisible: false,
      taskAuthorityVisible: false,
      tasks: null,
      editGroup: null,
      tempTask: {
        taskDefId: null,
        groups: []
      },
      tempGroup: {
        dept: {
          id: null
        },
        roles: [],
        key: null
      },
      editVo: {
        task: null,
        tempGroup: null
      }
    };
  },
  components: {
    NodeFlow,
    TaskAuthority
  },
  methods: {
    openNodeFlow(data,title) {
      this.queryTask(data);
      this.workflow = data;
      this.dialogTitle = title;
    },
    openTaskAuthorityDialog(vo) {
      this.taskAuthorityVisible = true;
      this.editVo = vo
      this.editGroup = JSON.parse(JSON.stringify(vo.tempGroup));
      this.$nextTick(() => {
        this.$refs.taskAuthority.init();
      })
      
    },
    // 递归添加isShow 控制收缩
    tasksDFun(arr, key) {
      let self = this;
      arr.forEach((e, i) => {
        e.isShow = false;
        if (e[key] && Array.isArray(e[key])) {
          self.tasksDFun(e[key], "roles");
        }
      });
      return arr;
    },
    queryTask(data) {
      let self = this;
      getWorkflowTask(data).then(res => {
        let arr = self.tasksDFun(res.data, "groups");
        this.nodeFlowVisible = true;
        this.tasks = arr;
      });
    },
    submitModify() {
      modifyTask(this.workflow, this.tasks).then(res => {
        this.nodeFlowVisible = false;
        this.$notify({
          title: "成功",
          message: "授权成功",
          type: "success",
          duration: 2000
        });
      });
    },
    editTaskGroup(){
      this.taskAuthorityVisible = false
      if(this.editVo.task){
        //新增
        if (this.editGroup.dept
          && this.editGroup.dept.id) {
            this.editVo.tempGroup = this.editGroup;
            this.editVo.task.groups.push(this.editVo.tempGroup);
          }
      } else {
        //修改
        this.editVo.tempGroup.dept = this.editGroup.dept;
        this.editVo.tempGroup.roles.splice(0, this.editVo.tempGroup.roles.length);
        this.editGroup.roles.forEach(r => this.editVo.tempGroup.roles.push(r));
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-dialog__body {
  padding: 20px 20px;
}
.app-container {
  .collect_list {
    border: solid 1px #ededed;
    box-shadow: 0 0 10px 0 rgba(238, 238, 238, 0.6);
    background-color: #fefefe;
    height: 100px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin: 0px 28px 30px 0px;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: block;
      line-height: 100px;
      padding: 0;
      margin: 0;
      margin-left: 14px;
    }
    div {
      padding: 0;
      margin: 0;
      margin-left: 10px;
      width: 155px;
      overflow: hidden;
      font-size: 15px;
      font-weight: 600;
    }
    &:hover {
      box-shadow: 0 0 50px 0 rgba(221, 221, 221, 0.6) !important;
      color: #3ba4f5;
    }
  }
}
</style>